<template>
  <div>
    <input type="text" v-model="title" @keydown.enter="add(title)" />
    <button @click="add(title)">提交</button>
  </div>
</template>

<script>
export default {
  name: "demo",
  props: [],
  components: {},
  data() {
    return {
      title: ""
    };
  },
  computed: {},
  watch: {},
  methods: {
    add(title) {
      this.$store.commit("add", title);
      this.title = "";
    }
  },
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},

  destroyed() {}
};
</script> 


<style lang='scss' scoped>
input{
    width: 280px;
    margin-top: 30px;
    height: 35px;
    border: 1px solid #ccc;
    margin-left: 20px;
}
button{
    width: 85px;
    margin-left: 20px;
    height: 35px;
    background-color: palevioletred;
    border: none;
}
</style>
